import React, { useState, useEffect } from 'react'; // 导入React核心库和hooks
import { 
  Table, 
  Button, 
  Modal, 
  Form, 
  Input, 
  Select, 
  Space, 
  message, 
  Popconfirm, 
  Card, 
  Row, 
  Col, 
  Statistic,
  Tag,
  Avatar,
  Tooltip,
  Switch
} from 'antd'; // 导入Ant Design组件
import { 
  UserAddOutlined, 
  EditOutlined, 
  DeleteOutlined, 
  SearchOutlined, 
  ReloadOutlined,
  UserOutlined,
  MailOutlined,
  PhoneOutlined,
  TeamOutlined,
  LockOutlined
} from '@ant-design/icons'; // 导入图标组件

const { Option } = Select; // 解构Select组件的Option子组件

const UserManagement = () => { // 定义用户管理组件
  // 状态管理
  const [users, setUsers] = useState([]); // 用户列表状态
  const [loading, setLoading] = useState(false); // 加载状态
  const [modalVisible, setModalVisible] = useState(false); // 模态框显示状态
  const [editingUser, setEditingUser] = useState(null); // 正在编辑的用户
  const [form] = Form.useForm(); // 表单实例
  const [searchForm] = Form.useForm(); // 搜索表单实例

  // 模拟用户数据
  const mockUsers = [ // 模拟用户数据数组
    {
      id: 1, // 用户ID
      username: 'admin', // 用户名
      email: 'admin@company.com', // 邮箱
      phone: '13800138000', // 手机号
      realName: '系统管理员', // 真实姓名
      department: '技术部', // 部门
      role: 'admin', // 角色
      status: 'active', // 状态
      createTime: '2024-01-01', // 创建时间
      lastLoginTime: '2024-01-15 10:30:00', // 最后登录时间
      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=admin' // 头像
    },
    {
      id: 2, // 用户ID
      username: 'zhangsan', // 用户名
      email: 'zhangsan@company.com', // 邮箱
      phone: '13800138001', // 手机号
      realName: '张三', // 真实姓名
      department: '销售部', // 部门
      role: 'user', // 角色
      status: 'active', // 状态
      createTime: '2024-01-02', // 创建时间
      lastLoginTime: '2024-01-14 15:20:00', // 最后登录时间
      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhangsan' // 头像
    }
  ];

  // 角色选项
  const roleOptions = [ // 角色选项数组
    { value: 'admin', label: '管理员' }, // 管理员角色
    { value: 'manager', label: '经理' }, // 经理角色
    { value: 'user', label: '普通用户' } // 普通用户角色
  ];

  // 部门选项
  const departmentOptions = [ // 部门选项数组
    { value: '技术部', label: '技术部' }, // 技术部
    { value: '销售部', label: '销售部' }, // 销售部
    { value: '市场部', label: '市场部' }, // 市场部
    { value: '人事部', label: '人事部' }, // 人事部
    { value: '财务部', label: '财务部' } // 财务部
  ];

  // 状态选项
  const statusOptions = [ // 状态选项数组
    { value: 'active', label: '启用' }, // 启用状态
    { value: 'inactive', label: '禁用' } // 禁用状态
  ];

  // 获取用户列表
  const fetchUsers = async () => { // 异步获取用户列表函数
    setLoading(true); // 设置加载状态为true
    try { // 尝试执行
      await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟网络延迟1秒
      setUsers(mockUsers); // 设置用户列表数据
    } catch (error) { // 捕获错误
      message.error('获取用户列表失败'); // 显示错误消息
    } finally { // 最终执行
      setLoading(false); // 设置加载状态为false
    }
  };

  // 组件挂载时获取用户列表
  useEffect(() => { // 副作用钩子
    fetchUsers(); // 调用获取用户列表函数
  }, []); // 空依赖数组，只在组件挂载时执行

  // 处理添加用户
  const handleAdd = () => { // 处理添加用户函数
    setEditingUser(null); // 清空编辑用户状态
    form.resetFields(); // 重置表单字段
    setModalVisible(true); // 显示模态框
  };

  // 处理编辑用户
  const handleEdit = (record) => { // 处理编辑用户函数，接收用户记录参数
    setEditingUser(record); // 设置编辑用户状态
    form.setFieldsValue({ // 设置表单字段值
      username: record.username, // 设置用户名
      email: record.email, // 设置邮箱
      phone: record.phone, // 设置手机号
      realName: record.realName, // 设置真实姓名
      department: record.department, // 设置部门
      role: record.role, // 设置角色
      status: record.status // 设置状态
    });
    setModalVisible(true); // 显示模态框
  };

  // 处理删除用户
  const handleDelete = async (id) => { // 异步处理删除用户函数，接收用户ID参数
    try { // 尝试执行
      await new Promise(resolve => setTimeout(resolve, 500)); // 模拟网络延迟0.5秒
      setUsers(users.filter(user => user.id !== id)); // 从用户列表中过滤掉被删除的用户
      message.success('删除成功'); // 显示成功消息
    } catch (error) { // 捕获错误
      message.error('删除失败'); // 显示错误消息
    }
  };

  // 处理表单提交
  const handleSubmit = async () => { // 异步处理表单提交函数
    try { // 尝试执行
      const values = await form.validateFields(); // 验证表单字段并获取值
      
      if (editingUser) { // 如果是编辑模式
        const updatedUsers = users.map(user => // 映射用户列表
          user.id === editingUser.id ? { ...user, ...values } : user // 如果ID匹配则更新用户信息
        );
        setUsers(updatedUsers); // 设置更新后的用户列表
        message.success('更新成功'); // 显示成功消息
      } else { // 如果是添加模式
        const newUser = { // 创建新用户对象
          id: Date.now(), // 使用时间戳作为ID
          ...values, // 展开表单值
          createTime: new Date().toISOString().split('T')[0], // 设置创建时间
          lastLoginTime: '-', // 设置最后登录时间
          avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${values.username}` // 设置头像
        };
        setUsers([...users, newUser]); // 将新用户添加到用户列表
        message.success('添加成功'); // 显示成功消息
      }
      
      setModalVisible(false); // 隐藏模态框
      form.resetFields(); // 重置表单字段
    } catch (error) { // 捕获错误
      console.error('表单验证失败:', error); // 在控制台输出错误信息
    }
  };

  // 处理搜索
  const handleSearch = (values) => { // 处理搜索函数，接收搜索值参数
    console.log('搜索条件:', values); // 在控制台输出搜索条件
    message.info('搜索功能待实现'); // 显示信息消息
  };

  // 处理重置搜索
  const handleReset = () => { // 处理重置搜索函数
    searchForm.resetFields(); // 重置搜索表单字段
    fetchUsers(); // 重新获取用户列表
  };

  // 处理状态切换
  const handleStatusChange = async (checked, record) => { // 异步处理状态切换函数，接收开关状态和用户记录参数
    try { // 尝试执行
      const updatedUsers = users.map(user => // 映射用户列表
        user.id === record.id ? { ...user, status: checked ? 'active' : 'inactive' } : user // 如果ID匹配则更新状态
      );
      setUsers(updatedUsers); // 设置更新后的用户列表
      message.success(`用户已${checked ? '启用' : '禁用'}`); // 显示成功消息
    } catch (error) { // 捕获错误
      message.error('状态更新失败'); // 显示错误消息
    }
  };

  // 表格列定义
  const columns = [ // 表格列定义数组
    {
      title: '用户信息', // 列标题
      key: 'userInfo', // 列键值
      render: (_, record) => ( // 渲染函数，接收行数据和记录参数
        <div style={{ display: 'flex', alignItems: 'center' }}> {/* 用户信息容器 */}
          <Avatar src={record.avatar} size={40} /> {/* 用户头像 */}
          <div style={{ marginLeft: 12 }}> {/* 用户信息文本容器 */}
            <div style={{ fontWeight: 'bold' }}>{record.realName}</div> {/* 真实姓名 */}
            <div style={{ color: '#666', fontSize: '12px' }}>@{record.username}</div> {/* 用户名 */}
          </div>
        </div>
      )
    },
    {
      title: '联系方式', // 列标题
      key: 'contact', // 列键值
      render: (_, record) => ( // 渲染函数
        <div> {/* 联系方式容器 */}
          <div><MailOutlined /> {record.email}</div> {/* 邮箱 */}
          <div><PhoneOutlined /> {record.phone}</div> {/* 手机号 */}
        </div>
      )
    },
    {
      title: '部门', // 列标题
      dataIndex: 'department', // 数据索引
      key: 'department', // 列键值
      render: (text) => <Tag color="blue">{text}</Tag> // 渲染为标签
    },
    {
      title: '角色', // 列标题
      dataIndex: 'role', // 数据索引
      key: 'role', // 列键值
      render: (text) => { // 渲染函数
        const roleMap = { // 角色映射对象
          admin: { color: 'red', text: '管理员' }, // 管理员角色
          manager: { color: 'orange', text: '经理' }, // 经理角色
          user: { color: 'green', text: '普通用户' } // 普通用户角色
        };
        const role = roleMap[text]; // 获取角色信息
        return <Tag color={role.color}>{role.text}</Tag>; // 返回角色标签
      }
    },
    {
      title: '状态', // 列标题
      dataIndex: 'status', // 数据索引
      key: 'status', // 列键值
      render: (text, record) => ( // 渲染函数
        <Switch // 开关组件
          checked={text === 'active'} // 根据状态设置开关状态
          onChange={(checked) => handleStatusChange(checked, record)} // 状态改变处理函数
          checkedChildren="启用" // 开启时显示文本
          unCheckedChildren="禁用" // 关闭时显示文本
        />
      )
    },
    {
      title: '创建时间', // 列标题
      dataIndex: 'createTime', // 数据索引
      key: 'createTime' // 列键值
    },
    {
      title: '最后登录', // 列标题
      dataIndex: 'lastLoginTime', // 数据索引
      key: 'lastLoginTime' // 列键值
    },
    {
      title: '操作', // 列标题
      key: 'action', // 列键值
      render: (_, record) => ( // 渲染函数
        <Space size="middle"> {/* 操作按钮容器 */}
          <Tooltip title="编辑用户"> {/* 编辑按钮提示 */}
            <Button // 编辑按钮
              type="primary" // 主要按钮类型
              icon={<EditOutlined />} // 编辑图标
              size="small" // 小尺寸
              onClick={() => handleEdit(record)} // 点击处理函数
            />
          </Tooltip>
          <Popconfirm // 删除确认弹窗
            title="确定要删除这个用户吗？" // 确认标题
            onConfirm={() => handleDelete(record.id)} // 确认删除处理函数
            okText="确定" // 确定按钮文本
            cancelText="取消" // 取消按钮文本
          >
            <Tooltip title="删除用户"> {/* 删除按钮提示 */}
              <Button // 删除按钮
                type="primary" // 主要按钮类型
                danger // 危险按钮样式
                icon={<DeleteOutlined />} // 删除图标
                size="small" // 小尺寸
              />
            </Tooltip>
          </Popconfirm>
        </Space>
      )
    }
  ];

  // 计算统计数据
  const stats = { // 统计数据对象
    total: users.length, // 总用户数
    active: users.filter(user => user.status === 'active').length, // 活跃用户数
    inactive: users.filter(user => user.status === 'inactive').length, // 非活跃用户数
    admin: users.filter(user => user.role === 'admin').length // 管理员数量
  };

  return ( // 返回JSX
    <div style={{ padding: '24px' }}> {/* 主容器 */}
      {/* 统计面板 */}
      <Row gutter={16} style={{ marginBottom: 24 }}> {/* 统计面板行 */}
        <Col span={6}> {/* 统计项列 */}
          <Card> {/* 统计卡片 */}
            <Statistic // 统计组件
              title="总用户数" // 统计标题
              value={stats.total} // 统计值
              prefix={<UserOutlined />} // 前缀图标
              valueStyle={{ color: '#3f8600' }} // 值样式
            />
          </Card>
        </Col>
        <Col span={6}> {/* 统计项列 */}
          <Card> {/* 统计卡片 */}
            <Statistic // 统计组件
              title="活跃用户" // 统计标题
              value={stats.active} // 统计值
              prefix={<TeamOutlined />} // 前缀图标
              valueStyle={{ color: '#1890ff' }} // 值样式
            />
          </Card>
        </Col>
        <Col span={6}> {/* 统计项列 */}
          <Card> {/* 统计卡片 */}
            <Statistic // 统计组件
              title="禁用用户" // 统计标题
              value={stats.inactive} // 统计值
              prefix={<LockOutlined />} // 前缀图标
              valueStyle={{ color: '#cf1322' }} // 值样式
            />
          </Card>
        </Col>
        <Col span={6}> {/* 统计项列 */}
          <Card> {/* 统计卡片 */}
            <Statistic // 统计组件
              title="管理员" // 统计标题
              value={stats.admin} // 统计值
              prefix={<UserOutlined />} // 前缀图标
              valueStyle={{ color: '#722ed1' }} // 值样式
            />
          </Card>
        </Col>
      </Row>

      {/* 搜索和操作区域 */}
      <Card style={{ marginBottom: 16 }}> {/* 搜索卡片 */}
        <Form // 搜索表单
          form={searchForm} // 表单实例
          layout="inline" // 内联布局
          onFinish={handleSearch} // 提交处理函数
        >
          <Form.Item name="keyword" label="关键词"> {/* 关键词搜索项 */}
            <Input // 输入框
              placeholder="用户名/姓名/邮箱" // 占位符
              style={{ width: 200 }} // 宽度样式
            />
          </Form.Item>
          <Form.Item name="department" label="部门"> {/* 部门筛选项 */}
            <Select // 选择框
              placeholder="选择部门" // 占位符
              style={{ width: 150 }} // 宽度样式
              allowClear // 允许清除
            >
              {departmentOptions.map(option => ( // 映射部门选项
                <Option key={option.value} value={option.value}> {/* 部门选项 */}
                  {option.label} {/* 部门标签 */}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="role" label="角色"> {/* 角色筛选项 */}
            <Select // 选择框
              placeholder="选择角色" // 占位符
              style={{ width: 150 }} // 宽度样式
              allowClear // 允许清除
            >
              {roleOptions.map(option => ( // 映射角色选项
                <Option key={option.value} value={option.value}> {/* 角色选项 */}
                  {option.label} {/* 角色标签 */}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item> {/* 操作按钮项 */}
            <Space> {/* 按钮容器 */}
              <Button // 搜索按钮
                type="primary" // 主要按钮类型
                icon={<SearchOutlined />} // 搜索图标
                htmlType="submit" // HTML提交类型
              >
                搜索 {/* 按钮文本 */}
              </Button>
              <Button // 重置按钮
                icon={<ReloadOutlined />} // 重置图标
                onClick={handleReset} // 点击处理函数
              >
                重置 {/* 按钮文本 */}
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>

      {/* 用户表格 */}
      <Card> {/* 表格卡片 */}
        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}> {/* 表格头部容器 */}
          <h3>用户列表</h3> {/* 表格标题 */}
          <Button // 添加用户按钮
            type="primary" // 主要按钮类型
            icon={<UserAddOutlined />} // 添加用户图标
            onClick={handleAdd} // 点击处理函数
          >
            添加用户 {/* 按钮文本 */}
          </Button>
        </div>
        
        <Table // 表格组件
          columns={columns} // 表格列定义
          dataSource={users} // 数据源
          rowKey="id" // 行键值
          loading={loading} // 加载状态
        />
      </Card>

      {/* 添加/编辑用户模态框 */}
      <Modal // 模态框组件
        title={editingUser ? '编辑用户' : '添加用户'} // 模态框标题
        open={modalVisible} // 显示状态
        onOk={handleSubmit} // 确定按钮处理函数
        onCancel={() => setModalVisible(false)} // 取消按钮处理函数
        width={600} // 模态框宽度
        destroyOnClose // 关闭时销毁
      >
        <Form // 表单组件
          form={form} // 表单实例
          layout="vertical" // 垂直布局
        >
          <Row gutter={16}> {/* 表单行容器 */}
            <Col span={12}> {/* 左列 */}
              <Form.Item // 用户名字段
                name="username" // 字段名
                label="用户名" // 字段标签
                rules={[ // 验证规则
                  { required: true, message: '请输入用户名' }, // 必填验证
                  { min: 3, message: '用户名至少3个字符' } // 长度验证
                ]}
              >
                <Input placeholder="请输入用户名" /> {/* 用户名输入框 */}
              </Form.Item>
            </Col>
            <Col span={12}> {/* 右列 */}
              <Form.Item // 真实姓名字段
                name="realName" // 字段名
                label="真实姓名" // 字段标签
                rules={[{ required: true, message: '请输入真实姓名' }]} // 必填验证
              >
                <Input placeholder="请输入真实姓名" /> {/* 真实姓名输入框 */}
              </Form.Item>
            </Col>
          </Row>
          
          <Row gutter={16}> {/* 表单行容器 */}
            <Col span={12}> {/* 左列 */}
              <Form.Item // 邮箱字段
                name="email" // 字段名
                label="邮箱" // 字段标签
                rules={[ // 验证规则
                  { required: true, message: '请输入邮箱' }, // 必填验证
                  { type: 'email', message: '请输入有效的邮箱地址' } // 邮箱格式验证
                ]}
              >
                <Input placeholder="请输入邮箱" /> {/* 邮箱输入框 */}
              </Form.Item>
            </Col>
            <Col span={12}> {/* 右列 */}
              <Form.Item // 手机号字段
                name="phone" // 字段名
                label="手机号" // 字段标签
                rules={[ // 验证规则
                  { required: true, message: '请输入手机号' }, // 必填验证
                  { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' } // 手机号格式验证
                ]}
              >
                <Input placeholder="请输入手机号" /> {/* 手机号输入框 */}
              </Form.Item>
            </Col>
          </Row>
          
          <Row gutter={16}> {/* 表单行容器 */}
            <Col span={12}> {/* 左列 */}
              <Form.Item // 部门字段
                name="department" // 字段名
                label="部门" // 字段标签
                rules={[{ required: true, message: '请选择部门' }]} // 必填验证
              >
                <Select placeholder="请选择部门"> {/* 部门选择框 */}
                  {departmentOptions.map(option => ( // 映射部门选项
                    <Option key={option.value} value={option.value}> {/* 部门选项 */}
                      {option.label} {/* 部门标签 */}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}> {/* 右列 */}
              <Form.Item // 角色字段
                name="role" // 字段名
                label="角色" // 字段标签
                rules={[{ required: true, message: '请选择角色' }]} // 必填验证
              >
                <Select placeholder="请选择角色"> {/* 角色选择框 */}
                  {roleOptions.map(option => ( // 映射角色选项
                    <Option key={option.value} value={option.value}> {/* 角色选项 */}
                      {option.label} {/* 角色标签 */}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          
          <Form.Item // 状态字段
            name="status" // 字段名
            label="状态" // 字段标签
            rules={[{ required: true, message: '请选择状态' }]} // 必填验证
          >
            <Select placeholder="请选择状态"> {/* 状态选择框 */}
              {statusOptions.map(option => ( // 映射状态选项
                <Option key={option.value} value={option.value}> {/* 状态选项 */}
                  {option.label} {/* 状态标签 */}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default UserManagement; // 导出用户管理组件 